
<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>应用管理</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-tab layui-tab-brief">
      <ul class="layui-tab-title">
        <li class="layui-this">二维码列表</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <div class="layui-row">
            <div class="layui-form" style="float:right;">
              <div class="layui-form-item" style="margin:0;">
                <label class="layui-form-label">应用ID</label>
                <div class="layui-input-inline">
                  <input type="text" name="appId" id="appId" placeholder="应用ID" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">商户ID</label>
                <div class="layui-input-inline">
                  <input type="text" name="mchId" id="mchId" placeholder="商户ID" autocomplete="off" class="layui-input">
                </div>
                <button id="search" class="layui-btn" data-type="reload">
                  <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                </button>
              </div>
            </div>
          </div>
        <div class="layui-row">
            <div class="layuiAdmin-btns" style="margin-bottom: 10px;"></div>
        </div>
          <table id="Pay_Mgr_QrCode_dataAll" lay-filter="Pay_Mgr_QrCode_dataAll"></table>
        </div>
      </div>
    </div>
  </div>
</div>
<style>
  .layui-wrap-content {
      width: 100%;
      text-align: center;
      padding: 2px 0px;
  }
  #qrcode {
      width: 50%;
      margin: 30px auto;
      padding: 15px;
      background-color: #fff;
      text-align: center;
      border-radius: 10px;
  }
  #qrcode img {
      margin: 0 auto;
  }
</style>
<script type="text/html" id="payBar">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-xs layui-btn-warm" id="ckEwm" lay-event="erweima">查看二维码</a>
</script>

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
<script>
  layui.use(['admin', 'table', 'util',"form"], function(){
    var $ = layui.$
            ,admin = layui.admin
            ,table = layui.table
            ,element = layui.element,
        layer =layui.layer
        ,view =layui.view
            ,form = layui.form;

    element.render('breadcrumb', 'breadcrumb');

    var tplState = function(d){
      if(d.state == 1) {
        return "<span class='layui-btn layui-btn-xs'>启用</span>";
      }
      return "<span class='layui-btn layui-btn-xs layui-btn-disabled'>停止</span>";
    };

    //商户列表
    table.render({
      elem: '#Pay_Mgr_QrCode_dataAll'
      ,url: layui.setter.baseUrl + '/mch_qrcode/list' //列表接口
      ,where: {
          access_token: layui.data(layui.setter.tableName).access_token
      }
      ,id: 'tableReload'
      ,page: true
      ,cols: [[
        {type: 'checkbox', fixed: 'left'}
        ,{field: 'id', title: '二维码ID'}
        ,{field: 'codeName', title: '二维码名称'}
        ,{field: 'appId', title: '应用ID'}
        ,{field: 'mchId', title: '商户ID'}
        ,{field: 'state', title: '状态', templet: tplState}
        ,{field: 'createTime', title: '创建时间', width: 200, templet: '<div>{{ layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss") }}</div>'}
        ,{field: 'edit', title: '操作', width: 320, toolbar: '#payBar' }
      ]]
      ,skin: 'line'
    });

    //监听工具条
    table.on('tool(Pay_Mgr_QrCode_dataAll)', function(obj){
      var data = obj.data;
      if(obj.event === 'detail'){

          var apid =data.id;

          admin.req({
              type:'get',
              url: layui.setter.baseUrl + '/mch_qrcode/get',
              data: {
                  id:apid
              },
              error: function(err){
                  layer.alert(err)
              },
              success: function(res){
                  if(res.code == 0){
                      data=res.data;

                      admin.popup({
                          title: '二维码详情'
                          , area: ['410px', '620px']
                          , id: 'LAY-popup-content-view'
                          , success: function (layero, index) {
                              view(this.id).render('app/qrcode/qrcode_view').done(function () {
                                  form.render(null, 'layuiadmin-app-form-list');

                                  var body =layer.getChildFrame('body',index);
                                  body.find('#email').val(data.email);
                                  form.val("layuiadmin-app-form-list",{

                                      "id":data.id,
                                      "mchId":res.data.mchId,
                                      "appId":data.appId,
                                      "channels":data.channels,
                                      "codeName":data.codeName,
                                      "minAmount":data.minAmount/100,
                                      "maxAmount":data.maxAmount/100
                                  })
                                  if(res.data.createTime != "" && res.data.createTime != null) {
                                      $('#createTime').val(layui.util.toDateString(res.data.createTime));
                                  }
                                  if(res.data.updateTime != "" && res.data.updateTime != null) {
                                      $('#updateTime').val(layui.util.toDateString(res.data.updateTime));
                                  }
                                  form.render();
                              });
                          }
                      });

                  }else {
                      layer.alert('请求数据失败');
                  }
              }

          })

      } else if(obj.event === 'edit') {
          var mchId= data.id;
          admin.req({
              type: 'get',
              url: layui.setter.baseUrl + '/mch_qrcode/get',
              data: {
                  id : mchId
              },
              error: function(err){
                  layer.alert(JSON.stringify(err.field), {
                      title: '错误提示'
                  })
              },
              success: function(res){
                  if(res.code == 0){
                      data= res.data;

                      admin.popup({
                          title: '编辑二维码'
                          , area: ['390px', '530px']
                          , id: 'LAY-popup-content-edit'
                          , success: function (layero, index) {

                              view(this.id).render('app/qrcode/qrcode_edit').done(function () {
                                  form.render(null, 'layuiadmin-app-form-list');
                                  var body =layer.getChildFrame('body',index);
                                  body.find('#email').val(data.email);
                                  console.log(body)
                                  form.val("layuiadmin-app-form-list", {

                                      "id" : data.id,
                                      "codeName":data.codeName,
                                      "minAmount":data.minAmount,
                                      "maxAmount":data.maxAmount


                                  })
                                  var cruAl = JSON.parse(data.channels);

                                  for(var i =0;i<cruAl.length;i++){
                                      if(cruAl[i] == 'wxpay_jsapi'){
                                          $('.wxChV').attr("checked",true);
                                      }else if(cruAl[i] == 'alipay_wap'){
                                          $('.aliChV').attr("checked",true);
                                      }
                                  }
                                  if(res.data.state == 1) {
                                      $("input[name='state'][value='1']").attr("checked",true);
                                  }else {
                                      $("input[name='state'][value='0']").attr("checked",true);
                                  }


                                  form.render();

                                  form.on('submit(userEdit)', function(data) {
                                      //这里可以写ajax方法提交表单

                                      if($('.aliChV').prop('checked') || $('.wxChV').prop('checked')){
                                          var  wxCurV ;
                                          if($('.wxChV').prop('checked')){
                                              wxCurV = $('.wxChV').val();
                                          }else {
                                              wxCurV = '';
                                          }
                                          var aliCurV;
                                          if($('.aliChV').prop('checked')){
                                              aliCurV = $('.aliChV').val();
                                          }else {
                                              aliCurV = '';
                                          }

                                          // 获取复选框的值，组成json数组格式提交数据

                                          var channels = "[\"" + wxCurV + "\",\"" + aliCurV + "\"]";

                                          admin.req({
                                              type: "POST",
                                              url: layui.setter.baseUrl + '/mch_qrcode/update',
                                              // data: "params=" + JSON.stringify(data.field),
                                              data: {
                                                  id:mchId,
                                                  channels: channels,
                                                  codeName: data.field.codeName,
                                                  minAmount: data.field.minAmount,
                                                  maxAmount: data.field.maxAmount,
                                                  state: data.field.state
                                              },
                                              success: function(res){
                                                  if(res.code == 0) {
                                                      layer.alert(res.msg,{title: "保存成功"},function(index){
                                                          table.reload('tableReload');
                                                          layer.closeAll();
                                                      })
                                                  }else {
                                                      layer.alert(res.msg, {
                                                          title: '保存失败'
                                                      });
                                                  }
                                              }
                                          });
                                          return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                                      }else {
                                          layer.alert(' 扫码渠道不能为空 或者 至少选中一个扫码渠道');
                                      }

                                  });
                              });
                          }
                      });

                      form.render();
                  }
              }
          })


      } else if(obj.event === 'erweima') {
        var peizhiT = JSON.parse(obj.data.channels);
          admin.req({
                url: layui.setter.baseUrl + '/mch_qrcode/view_code'
                ,data: { id: data.id }
                ,success: function(res){
                    if(res.code == 0){
                        layer.open({
                            type: 1,
                            title: '二维码',
                            scrollbar: false,//浏览器滚动条已锁
                            closeBtn: 0, //不显示关闭按钮
                            shadeClose: true, //开启遮罩关闭
                            // area: ['300px', '380px'],
                            area: '300px',
                            content: '<div class="layui-wrap-content"><div id="qrcode"><div style="margin-bottom:15px;">扫二维码向商户付款</div></div></div><div style="margin:10px auto;text-align:center"><img id="zhifubao" style="display:none" src="layui/images/imgs/zfb.png" alt="支付宝"/><img id="weixin" style="display:none" src="layui/images/imgs/wxpay.png" alt="微信"/></div>'
                        });

                        for(var i = 0;i< peizhiT.length;i++){
                            if(peizhiT[i].split('_')[0] == 'wxpay'){
                                $('#weixin').css('display','inline-block');
                            }else if(peizhiT[i].split('_')[0] == 'alipay'){
                                $('#zhifubao').css('display','inline-block');
                            }
                        }

                        var qrcode = new QRCode(document.getElementById("qrcode"),{
                            text: res.data.codeUrl,
                            width: 100,
                            height: 100,
                        });
                    }
                }
            })
      }

    });

    // 搜索
    var $ = layui.$, active = {
      reload: function(){
        var mchId = $('#mchId').val();
        var appId = $("#appId").val();
        //执行重载
        table.reload('tableReload', {
          page: {
            curr: 1 //重新从第 1 页开始
          }
          ,where: {
            mchId: mchId,
            appId : appId
          }
        });
      }
    };
    $('#search').on('click', function() {
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });

    // 渲染表单
    form.render();
  });
</script>
